Node.js and Raspberry Pi - Webserver with WebSocket

WebSocket ஐப் பயன்படுத்தி நிகழ்நேர இரு-திசை தகவல்தொடர்புடன் வலைச் சேவையகத்தை உருவாக்க கற்றுக்கொள்ளுங்கள்

WebSocket என்றால் என்ன?

WebSocket வலைவழியாக நிகழ்நேரத்தில் இரு-திசை தகவல்தொடர்பை இயலுமைப்படுத்துகிறது.

WebSocket ஒரு சாதாரண HTTP சேவையகத்துடன் இணைந்து இயக்கப்படலாம். ஒரு வலை உலாவியில் ஒரு பொத்தானைக் கிளிக் செய்து, உங்கள் வீட்டில் ஒரு விளக்கை இயக்கும் உங்கள் Raspberry Pi இல் ஒரு GPIO ஐ இயலுமைப்படுத்தலாம். எல்லாம் நிகழ்நேரத்தில், மற்றும் தகவல்தொடர்பு இரு வழிகளிலும் செல்கிறது!

இந்த அத்தியாயத்தில், நாம் WebSocket உடன் ஒரு வலை சேவையகத்தை அமைப்போம். பின்னர் ஒரு பொத்தானுடன் ஒரு LED ஐ எரியச் செய்வதற்கும் அணைப்பதற்கும் நமக்கு முன்னர் உள்ள எடுத்துக்காட்டுடன் தொடர்பு கொள்ள ஒரு உலாவி UI ஐ உருவாக்குவோம்.

எனக்கு என்ன தேவை?

இந்த டுடோரியலுக்கு உங்களுக்கு ஒரு Raspberry Pi தேவை. எங்கள் எடுத்துக்காட்டுகளில் நாம் ஒரு Raspberry Pi 3 ஐப் பயன்படுத்துகிறோம், ஆனால் இந்த டுடோரியல் பெரும்பாலான பதிப்புகளுக்கும் வேலை செய்ய வேண்டும்.

இதற்கு உங்களுக்கு தேவை:

வெவ்வேறு கூறுகளின் விளக்கங்களுக்கு மேலே உள்ள பட்டியலில் உள்ள இணைப்புகளைக் கிளிக் செய்யவும்.

💡 குறிப்பு:

நீங்கள் பயன்படுத்தும் LED வகையைப் பொறுத்து உங்களுக்குத் தேவையான மின்தடை நாம் பயன்படுத்துவதிலிருந்து வேறுபட்டிருக்கலாம். பெரும்பாலான சிறிய LED க்களுக்கு ஒரு சிறிய மின்தடை மட்டுமே தேவை, சுமார் 200-500 ஓம்கள். நீங்கள் பயன்படுத்தும் சரியான மதிப்பு பொதுவாக முக்கியமானது அல்ல, ஆனால் மின்தடையின் மதிப்பு சிறியதாக இருந்தால், LED பிரகாசமாக ஒளிரும்.

எங்களுக்கு முன்னர் உள்ள எடுத்துக்காட்டுடன் ஒப்பிடும்போது, நமக்குத் தேவையான ஒரே புதிய விஷயம் ஒரு வலை சேவையகத்தை அமைப்பது மற்றும் socket.io தொகுதியை நிறுவுவது.

Raspberry Pi மற்றும் Node.js க்கான வலைச் சேவையகம்

இந்த Node.js டுடோரியலில் முந்தைய அத்தியாயங்களைப் பின்பற்றி, HTML கோப்புகளை வழங்கக்கூடிய ஒரு வலை சேவையகத்தை அமைப்போம்.

எங்கள் "nodetest" அடைவில் நிலையான html கோப்புகளுக்குப் பயன்படுத்தக்கூடிய ஒரு புதிய அடைவை உருவாக்கவும்:

pi@jassifteam:~/nodetest $ mkdir public

இப்போது ஒரு வலைச் சேவையகத்தை அமைப்போம். கோரிக்கை செய்யப்பட்ட கோப்பைத் திறந்து உள்ளடக்கத்தை வாடிக்கையாளருக்கு வழங்கும் ஒரு Node.js கோப்பை உருவாக்கவும். ஏதேனும் தவறு நடந்தால், 404 பிழையை வீசவும்.

pi@jassifteam:~/nodetest $ nano webserver.js

webserver.js:

let http = require('http').createServer(handler); //require http server, and create server with function handler()
let fs = require('fs'); //require filesystem module

http.listen(8080); //listen to port 8080

function handler (req, res) { //create server
  fs.readFile(__dirname + '/public/index.html', function(err, data) { //read file index.html in public folder
    if (err) {
      res.writeHead(404, {'Content-Type': 'text/html'}); //display 404 on error
      return res.end("404 Not Found");
    }
    res.writeHead(200, {'Content-Type': 'text/html'}); //write HTML
    res.write(data); //write data from index.html
    return res.end();
  });
}

"public" என்ற கோப்புறைக்குச் செல்லவும்:

pi@jassifteam:~/nodetest $ cd public

மற்றும் ஒரு HTML கோப்பை, index.html உருவாக்கவும்:

pi@jassifteam:~/nodetest/public $ nano index.html

index.html:

<!DOCTYPE html>
<html>
<body>

<h1>Control LED light</h1>
<input id="light" type="checkbox">LED

</body>
</html>

இந்த கோப்பிற்கு இன்னும் எந்த செயல்பாடும் இருக்காது. இப்போதைக்கு அது只是一个 இடத்தைப் பிடிப்பதாகும். வலைச் சேவையகம் வேலை செய்கிறதா என்று பார்ப்போம்:

pi@jassifteam:~/nodetest/public $ cd ..
pi@jassifteam:~/nodetest $ node webserver.js

http://[RaspberryPi_IP]:8080/ ஐப் பயன்படுத்தி ஒரு உலாவியில் வலைத்தளத்தைத் திறக்கவும்:

வலைச் சேவையகம் இப்போது இயங்க வேண்டும், மேலும் நாம் WebSocket பகுதிக்கு செல்லலாம்.

Node.js க்கான socket.io ஐ நிறுவவும்

வலைச் சேவையகம் அமைக்கப்பட்டுள்ளது, உங்கள் Raspberry Pi கணினி தொகுப்புகளை அவற்றின் சமீபத்திய பதிப்புகளுக்கு புதுப்பிக்கவும்.

உங்கள் கணினி தொகுப்பு பட்டியலைப் புதுப்பிக்கவும்:

pi@jassifteam:~ $ sudo apt-get update

உங்கள் நிறுவப்பட்ட அனைத்து தொகுப்புகளையும் அவற்றின் சமீபத்திய பதிப்பிற்கு மேம்படுத்தவும்:

pi@jassifteam:~ $ sudo apt-get dist-upgrade

இதை தவறாமல் செய்வது உங்கள் Raspberry Pi நிறுவலை புதுப்பித்துக்கொண்டே இருக்கும்.

socket.io இன் சமீபத்திய பதிப்பைப் பதிவிறக்கவும் மற்றும் நிறுவவும், பின்வரும் கட்டளையைப் பயன்படுத்தவும்:

pi@jassifteam:~ $ npm install socket.io --save

எங்கள் வலைச் சேவையகத்தில் WebSocket ஐச் சேர்த்தல்

இப்போது நமது பயன்பாட்டில் WebSocket ஐப் பயன்படுத்தலாம். எங்கள் index.html கோப்பைப் புதுப்பிப்போம்:

index.html:

<!DOCTYPE html>
<html>
<body>

<h1>Control LED light</h1>
<p><input type="checkbox" id="light"></p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script> <!-- include socket.io client side script -->
<script>
let socket = io(); //load socket.io-client and connect to the host that serves the page
window.addEventListener("load", function(){ //when page loads
  let lightbox = document.getElementById("light");
  lightbox.addEventListener("change", function() { //add event listener for when checkbox changes
    socket.emit("light", Number(this.checked)); //send button status to server (as 1 or 0)
  });
});
socket.on('light', function (data) { //get button status from client
  document.getElementById("light").checked = data; //change checkbox according to push button on Raspberry Pi
  socket.emit("light", data); //send push button status to back to server
});
</script>

</body>
</html>

மற்றும் எங்கள் webserver.js கோப்பு:

webserver.js:

let http = require('http').createServer(handler); //require http server, and create server with function handler()
let fs = require('fs'); //require filesystem module
let io = require('socket.io')(http) //require socket.io module and pass the http object (server)

http.listen(8080); //listen to port 8080

function handler (req, res) { //create server
  fs.readFile(__dirname + '/public/index.html', function(err, data) { //read file index.html in public folder
    if (err) {
      res.writeHead(404, {'Content-Type': 'text/html'}); //display 404 on error
      return res.end("404 Not Found");
    }
    res.writeHead(200, {'Content-Type': 'text/html'}); //write HTML
    res.write(data); //write data from index.html
    return res.end();
  });
}

io.sockets.on('connection', function (socket) {// WebSocket Connection
  let lightvalue = 0; //static variable for current status
  socket.on('light', function(data) { //get light switch status from client
    lightvalue = data;
    if (lightvalue) {
      console.log(lightvalue); //turn LED on or off, for now we will just show it in console.log
    }
  });
});

சேவையகத்தை சோதிப்போம்:

pi@jassifteam:~ $ node webserver.js

http://[RaspberryPi_IP]:8080/ ஐப் பயன்படுத்தி ஒரு உலாவியில் வலைத்தளத்தைத் திறக்கவும்:

இப்போது சேவையகம் சரிபார்ப்புப் பெட்டியில் உள்ள அனைத்து மாற்றங்களையும் Raspberry Pi இல் உள்ள கன்சோலுக்கு வெளியீடு செய்ய வேண்டும்.

வாடிக்கையாளர் மாற்றங்களை சேவையகத்திற்கு அனுப்புகிறார், மற்றும் சேவையகம் பதிலளிக்கிறது.

முந்தைய அத்தியாயத்திலிருந்து புஷ் பட்டன் கட்டுப்படுத்தப்பட்ட LED ஐச் சேர்ப்போம்.

வன்பொருளைச் சேர்த்தல், மற்றும் வாடிக்கையாளருக்கு பதில் அனுப்புதல்

எங்கள் webserver.js கோப்பை மீண்டும் புதுப்பிப்போம். புஷ்பட்டன் கட்டுப்படுத்தப்பட்ட LED அத்தியாயத்திலிருந்து நிறைய குறியீட்டைப் பயன்படுத்துவோம்.

webserver.js:

let http = require('http').createServer(handler); //require http server, and create server with function handler()
let fs = require('fs'); //require filesystem module
let io = require('socket.io')(http) //require socket.io module and pass the http object (server)
let Gpio = require('onoff').Gpio; //include onoff to interact with the GPIO
let LED = new Gpio(4, 'out'); //use GPIO pin 4 as output
let pushButton = new Gpio(17, 'in', 'both'); //use GPIO pin 17 as input, and 'both' button presses, and releases should be handled

http.listen(8080); //listen to port 8080

function handler (req, res) { //create server
  fs.readFile(__dirname + '/public/index.html', function(err, data) { //read file index.html in public folder
    if (err) {
      res.writeHead(404, {'Content-Type': 'text/html'}); //display 404 on error
      return res.end("404 Not Found");
    }
    res.writeHead(200, {'Content-Type': 'text/html'}); //write HTML
    res.write(data); //write data from index.html
    return res.end();
  });
}

io.sockets.on('connection', function (socket) {// WebSocket Connection
  let lightvalue = 0; //static variable for current status
  pushButton.watch(function (err, value) { //Watch for hardware interrupts on pushButton
    if (err) { //if an error
      console.error('There was an error', err); //output error message to console
      return;
    }
    lightvalue = value;
    socket.emit('light', lightvalue); //send button status to client
  });
  socket.on('light', function(data) { //get light switch status from client
    lightvalue = data;
    if (lightvalue != LED.readSync()) { //only change LED if status has changed
      LED.writeSync(lightvalue); //turn LED on or off
    }
  });
});

process.on('SIGINT', function () { //on ctrl+c
  LED.writeSync(0); // Turn LED off
  LED.unexport(); // Unexport LED GPIO to free resources
  pushButton.unexport(); // Unexport Button GPIO to free resources
  process.exit(); //exit completely
});

சேவையகத்தை சோதிப்போம்:

pi@jassifteam:~ $ node webserver.js

http://[RaspberryPi_IP]:8080/ ஐப் பயன்படுத்தி ஒரு உலாவியில் வலைத்தளத்தைத் திறக்கவும்:

இப்போது சேவையகம் சரிபார்ப்புப் பெட்டியில் உள்ள அனைத்து மாற்றங்களையும் Raspberry Pi இல் உள்ள கன்சோலுக்கு வெளியீடு செய்ய வேண்டும்.

வாடிக்கையாளர் மாற்றங்களை சேவையகத்திற்கு அனுப்புகிறார், மற்றும் சேவையகம் பதிலளிக்கிறது.

Ctrl+c உடன் நிரலை முடிக்கவும்.

பயிற்சி

❓ Node.js இல் WebSocket செயல்பாட்டிற்கு எந்த தொகுதி பொதுவாகப் பயன்படுத்தப்படுகிறது? தேர்வு செய்யவும்.

ws தொகுதி
✗ தவறு! ws தொகுதி பயன்படுத்தப்படலாம், ஆனால் socket.io மிகவும் பிரபலமானது மற்றும் அதிக அம்சங்களைக் கொண்டுள்ளது
socket.io தொகுதி
✓ சரி! socket.io என்பது Node.js இல் WebSocket செயல்பாட்டிற்கான மிகவும் பிரபலமான தொகுதியாகும்
websocket தொகுதி
✗ தவறு! "websocket" என்பது Node.js இல் ஒரு செல்லுபடியாகும் தொகுதி அல்ல
realtime தொகுதி
✗ தவறு! "realtime" என்பது Node.js இல் ஒரு செல்லுபடியாகும் தொகுதி அல்ல